<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>regionSelector</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" href="#">
    <script id="header" type="text/javascript" src="../js/header.js?head=../"></script>
    <script id="layui" type="text/javascript" src="../js/lib/layui/layui.js"></script>
    <link rel="stylesheet" href="../js/lib/layui/css/layui.css" />
    <style type="text/css">
        .center-center{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
        }
    </style>
</head>
<body>
<div id="test" style="width: 100%; height: 50px;">
    <form action="#">
        <!-- 省 -->
        <span class="center-center">省：</span>
        <label class="select-box">
            <select class="select-tag select" id="areaProvince" size="1" name="area1">
            </select>
        </label>
        <!-- 市 -->
        <span class="center-center">市：</span>
        <label class="select-box">
            <select class="select-tag select" id="areaCity" size="1" name="area2"></select>
        </label>
        <!-- 县 -->
        <span class="center-center">县：</span>
        <label class="select-box">
            <select class="select-tag select" id="areaCounty" size="1" name="area3"></select>
        </label>
        <!-- 确定按钮 -->
        <label style="margin: 0 10px;">
            <input type="submit" class="btn btn-primary radius" value="确定">
        </label>
    </form>
</div>
<script type="text/javascript" charset="UTF-8">
    $(function () {
        let baseUrl = "../plugins";
        let getAreaUrl = "/findSysAreaByLevel";
        let pluginBox = "test";
        let selectLevel = 3;
        let form = document.querySelector("#"+pluginBox+" "+"form");
        let selectBox = document.querySelectorAll(".select-tag");
        form.style = "display:flex;";
        let activeAreaId = ["0", "110000000000", "110100000000", "110101000000"];
        for (let i = 0; i < selectLevel; i++) {
            renderOptions(selectBox[i], i);
        }
        selectBox.forEach((e, i)=>{
            e.parentNode.style = "display: block; width:100px;";
            e.style = "background-color: rgba(0, 0, 0, 0);";
            e.dataset.key = i + "";

        });

        /**
         * 渲染地域选项
         * @param item      被渲染的dom元素
         * @param index     当前菜单分级
         */
        function renderOptions (item, index){
            let level = index;
            let parentId = activeAreaId[index];
            let records = getAreaRecords(level, parentId);
            // console.log(item);
            // console.log(level, parentId, activeAreaId);
            let str = "";
            let isChecked = ""
            records.forEach((e, i)=>{
                isChecked = (i === 0) ? "selected = 'selected'" : "";
                str +=
                    "<option value='" +e.areaCode+ "' " +
                    "data-id='" +e.id+ "' " +
                    "data-parentId='" +e.parentCode+ "' " +
                     isChecked +
                    ">" +e.name+ "</option>";
            });
            item.innerHTML = str;
        }

        /**
         * 获取地域数据
         * @param level     地域等级
         * @param parentId  父节点ID
         */
        function getAreaRecords(level, parentId){
            let records = null;
            $.ajax({
                async: false,
                url : baseUrl + getAreaUrl,
                data: {
                    "level": level,
                    "parentId": parentId
                },
                success: (res)=>{
                    records = res;
                }
            });
            return records;
        }
    });
</script>
</body>
</html>